<template>
  <div class="p-4">
    <div style="width: 260px">
      <LeftFile ref="leftFileRef" @dataChange="handleRootFolderDataChange" @search="handleSearch" @allowAddFile="handleSetAddButtonVisible" />
    </div>
    <div class="header">
      <div class="dropdown-position" v-show="addButtonShow">
        <a-dropdown :trigger="['click']">
          <a-button class="right-button" preIcon="ant-design:plus-outlined">添加</a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item v-for="menuItem in fileCreateMenu" :key="menuItem.value" @click="handleFileCreateMenuClick(menuItem.value)">
                {{ menuItem.label }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>

    <div style="margin-top: 10px">
      <RightFile
        ref="rightFileRef"
        style="height: 100%"
        :isExpand="isRightFileExpand"
        @rowClick="handleTableRowClick"
        @changeFolder="handleChangeFolder"
        @openFileAttribute="handleFileOpenAttribute"
      />
      <FileAttribute ref="fileAttributeRef" style="height: 100%" @closed="handleFileAttributeColse" @opened="handleFileAttributeOpen" />
    </div>
  </div>

  <FileUploadModal ref="fileUploadRef" @success="loadFileList" @closed="loadFileList" />
  <FileLinkModal ref="fileLinkRef" @success="loadFileList" />
</template>

<script>
  import { ref, defineComponent } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { fileFlagOptions, fileCreateMenu } from './files.data';
  import LeftFile from './components/LeftFile.vue';
  import RightFile from './components/RightFile.vue';
  import FileUploadModal from './components/FileUploadModal.vue';
  import FileLinkModal from './components/FileLinkModal.vue';
  import FileAttribute from './components/FileAttribute.vue';
  import excelmg from '/@/assets/svg/fileType/excel.svg';
  import imageImg from '/@/assets/svg/fileType/image.png';
  import otherImg from '/@/assets/svg/fileType/other.svg';
  import pdfImg from '/@/assets/svg/fileType/pdf.svg';
  import txtImg from '/@/assets/svg/fileType/txt.svg';
  import wordImg from '/@/assets/svg/fileType/word.svg';
  import linkImg from '/@/assets/images/link.png';
  import { object } from 'vue-types';

  export default defineComponent({
    name: 'SystemFiles',
    components: {
      FileUploadModal,
      FileLinkModal,
      FileAttribute,
      RightFile,
      LeftFile,
    },
    setup() {
      const fileUploadRef = ref();
      const fileLinkRef = ref();
      const leftFileRef = ref();
      const rightFileRef = ref();
      const fileAttributeRef = ref();

      // 添加按钮是否展示
      const addButtonShow = ref(true);
      // 文件列表是否展开
      const isRightFileExpand = ref(true);
      // 目录路径
      const folderPathList = ref([]);
      // 记录最后一次查询参数
      let searchParams = {};

      async function loadFileList() {
        rightFileRef.value.loadRootFloderData(
          searchParams.type,
          searchParams.keyword,
          searchParams.fileId,
          searchParams.fileName,
          searchParams.isRecycleBin
        );
      }

      /**
       * 根目录路径切换事件
       */
      async function handleRootFolderDataChange(pathList, queryParams) {
        searchParams = Object.assign({}, queryParams);
        folderPathList.value = pathList;
        searchParams.keyword = '';
        leftFileRef.value.setSearchInput(searchParams.fileName, true);
        loadFileList();
      }

      /**
       * 关键字搜索
       */
      async function handleSearch(keyword) {
        searchParams.keyword = keyword;
        loadFileList();
      }

      /**
       * 设置添加按钮是否展示
       */
      async function handleSetAddButtonVisible(visible) {
        addButtonShow.value = visible;
      }

      /**
       * 关闭文件属性DRAW
       */
      async function handleFileAttributeColse() {
        isRightFileExpand.value = true;
      }

      /**
       * 打开文件属性DRAW
       */
      async function handleFileAttributeOpen() {
        isRightFileExpand.value = false;
      }

      /**
       * 表格行点击事件
       */
      async function handleTableRowClick(record) {
        let success = fileAttributeRef.value.hide();
        if (!success) {
          fileAttributeRef.value.setData(record.id);
        }
      }

      /**
       * 表格行点击进入目录事件
       */
      async function handleChangeFolder(record, pathList) {
        searchParams.fileId = record.id;
        searchParams.fileName = record.fileName;
        folderPathList.value = pathList;
        leftFileRef.value.setSearchInput(searchParams.fileName, false);
        let success = fileAttributeRef.value.hide();
        if (!success) {
          fileAttributeRef.value.setData(null);
        }
      }

      /**
       * 打开文件属性
       */
      async function handleFileOpenAttribute(record) {
        fileAttributeRef.value.show();
        fileAttributeRef.value.setData(record.id);
      }

      // 右侧-添加按钮-下拉菜单点击事件
      async function handleFileCreateMenuClick(key) {
        console.log(key);
        switch (key) {
          case 'uploadLocal':
            const pathList = cloneDeep(folderPathList.value);
            fileUploadRef.value.showModal(pathList);
            break;
          case 'createLinkFile':
            const folderItem = folderPathList.value[folderPathList.value.length - 1];
            fileLinkRef.value.showAddModal(folderItem.fileId);
            break;
          case 'createFolder':
            rightFileRef.value.createFolder();
            break;
        }
      }

      return {
        fileUploadRef,
        fileLinkRef,
        leftFileRef,
        rightFileRef,
        fileAttributeRef,
        fileCreateMenu,
        addButtonShow,
        isRightFileExpand,
        loadFileList,
        handleRootFolderDataChange,
        handleSearch,
        handleSetAddButtonVisible,
        handleFileAttributeColse,
        handleFileAttributeOpen,
        handleTableRowClick,
        handleChangeFolder,
        handleFileOpenAttribute,
        handleFileCreateMenuClick,
      };
    },
  });
</script>

<style lang="less">
  @import './less/FileList';
</style>
